<script setup>
</script>

<template>
<div class="device">
  <div class="container">
    <!-- 背景 -->
    <div class="bg">
      <img src="@/assets/images/banner2.jpg" alt="">
    </div>
    <!-- 标题 -->
    <div class="title">
      <i class="iconfont icon-zhinengsuo1"></i>
      <p class="txt">全部设备功能</p>
    </div>

    <!-- 设备 -->
    <div class="device_show">
        <!-- 室内温度显示 -->
        <div class="T-indoor">
        </div>
        <!-- 室外温度显示 -->
        <div class="T-outdoor">

        </div>
        <!-- 室内湿度显示 -->
        <div class="humidity-indoor"></div>
        <!-- 室外湿度显示 -->
        <div class="humidity-outdoor"></div>
        <!-- 烟雾浓度显示 -->
        <div class="smoke"></div>

    </div>
  </div>
</div>
 
  </template>

<style lang="scss" scoped>
.device{
  position: relative;
  background-color: white;
  width: 100%;
  height: auto;
    .container{
     margin: 0 auto;
     width: 1240px;

    //  背景
    .bg{
      height: 260px;
      width: 100%;
      margin-top: 10px;
      margin-bottom: 10px;
      img{
        width: 100%;
       height: 200px;
      }
    }

    // title
      .title{
        display: flex;
      height: 35px;
      width: 500px;
      margin: 10px 0;
      border-bottom: 2px solid  $xtxColor; 
      .iconfont{
        font-size: 28px;
        color: $xtxColor;
        line-height:35px ;
      }

      .txt {
        padding-left: 10px;
        font-size: 20px;
        line-height:35px ;
      }
      }

    // 设备

    .device_show{
      flex-wrap:wrap;
      display: flex;
      width: 100%;
    height: 1000px;
    // background: pink;
      
// 室内温度
    .T-indoor{    
          width: 400px;
          height: 350px;
          margin-top: 10px;
          margin-right:10px ;
          border-radius: 15px;
          background: $bgColor;
          transition: all .5s;

          &:hover {
            transform: translate3d(0, -3px, 0);
            box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
          }

          // img {
          //   width: 350px;
          //   height: 280px;
          // }

          .name{
                height: 35px;
                width: 100%;
              border-bottom: 1px solid $sucColor;

                span{
                font-size: 22px;
                display: flex;
                justify-content: center;  
                align-items: center;  
                // padding-top: 12px;
                text-align: center;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                padding-bottom: 13px;
              }
         }
      }


// 室外温度

        .T-outdoor{
          width: 400px;
          height: 350px;
          margin-top: 10px;
          margin-right:10px ;
          border-radius: 15px;
          background: $bgColor;
          transition: all .5s;

          &:hover {
            transform: translate3d(0, -3px, 0);
            box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
          }

          img {
            width: 350px;
            height: 280px;
          }

          .name{
                height: 35px;
                width: 100%;
              border-bottom: 1px solid $sucColor;

                span{
                font-size: 22px;
                display: flex;
                justify-content: center;  
                align-items: center;  
                // padding-top: 12px;
                text-align: center;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                padding-bottom: 13px;
                }
           }
        }

//室内湿度
        .humidity-indoor{
          width: 400px;
          height: 350px;
          margin-top: 10px;
          margin-right:10px ;
          border-radius: 15px;
          background: $bgColor;
          transition: all .5s;

          &:hover {
            transform: translate3d(0, -3px, 0);
            box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
          }

          img {
            width: 350px;
            height: 280px;
          }

          .name{
                height: 35px;
                width: 100%;
              border-bottom: 1px solid $sucColor;

                span{
                font-size: 22px;
                display: flex;
                justify-content: center;  
                align-items: center;  
                // padding-top: 12px;
                text-align: center;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                padding-bottom: 13px;
                }
           } 
        }


//室外湿度
        .humidity-outdoor{
          width: 400px;
          height: 350px;
          margin-top: 10px;
          margin-right:10px ;
          border-radius: 15px;
          background: $bgColor;
          transition: all .5s;

          &:hover {
            transform: translate3d(0, -3px, 0);
            box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
          }

          img {
            width: 350px;
            height: 280px;
          }

          .name{
                height: 35px;
                width: 100%;
              border-bottom: 1px solid $sucColor;

                span{
                font-size: 22px;
                display: flex;
                justify-content: center;  
                align-items: center;  
                // padding-top: 12px;
                text-align: center;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                padding-bottom: 13px;
                }
           }
        }

        // 烟雾浓度

        .smoke{
          width: 400px;
          height: 350px;
          margin-top: 10px;
          margin-right:10px ;
          border-radius: 15px;
          background: $bgColor;
          transition: all .5s;

          &:hover {
            transform: translate3d(0, -3px, 0);
            box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
          }

          img {
            width: 350px;
            height: 280px;
          }

          .name{
                height: 35px;
                width: 100%;
              border-bottom: 1px solid $sucColor;

                span{
                font-size: 22px;
                display: flex;
                justify-content: center;  
                align-items: center;  
                // padding-top: 12px;
                text-align: center;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                padding-bottom: 13px;
                }
           }
        }
     }
    }
}
</style>